<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in options" :key="item.key">{{item.title}}</view>
			</picker-view-column>
			<picker-view-column v-if="children&&children.length">
				<view class="w-picker-item" v-for="(item,index) in children" :key="item.key">{{item.title}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		name:"selectorPicker",
		props: {
			itemHeight: {
				type: String,
				default: "44px"
			},
			options: {
				type: [Array, Object],
				default () {
					return []
				}
			},
			value: {
				type: String,
				default: ""
			},
			defaultType: {
				type: String,
				default: "label"
			},
			defaultProps: {
				type: Object,
				default () {
					return {
						label: "label",
						value: "value"
					}
				}
			}
		},
		data() {
			return {
				pickVal: [],
				children: []
			};
		},
		computed: {
			nodeKey() {
				return this.defaultProps.label;
			},
			nodeValue() {
				return this.defaultProps.value;
			},
			range() {
				return this.options
			}
		},
		watch: {
			value(val) {
				if (this.options.length != 0) {
					this.initData();
				}
			},
			options(val) {
				this.initData();
			}
		},
		created() {
			if (this.options.length != 0) {
				this.initData();
			}
		},
		methods: {
			initData() {
				let dVal = this.value || "";
				let data = this.range;
				let pickVal = [0];
				let cur = null;
				let label = "";
				let value, idx;
				if (this.defaultType == this.nodeValue) {
					value = data.find((v) => v[this.nodeValue] == dVal);
					idx = data.findIndex((v) => v[this.nodeValue] == dVal);
				} else {
					value = data.find((v) => v[this.nodeKey] == dVal);
					idx = data.findIndex((v) => v[this.nodeKey] == dVal);
				}
				pickVal = [idx != -1 ? idx : 0];
				this.$nextTick(() => {
					this.pickVal = pickVal;
				});
				this.children = this.options[pickVal].children
				if (this.children && this.children.length > 0) {
					var arr = [];
					var pickVal1 =  0;
					var data1= this.range;
					this.children = this.options[pickVal1].children
					var aaa = this.children
					var cur1 = [data1[pickVal1],aaa[0]];
					
				
					this.$emit("change", {
						result: cur1[1].key,
						value: `${cur1[0].title}/ ${cur1[1].title}`,
						obj: cur1
					})
				}else{ 
				if (this.defaultType == this.nodeValue) {
					this.$emit("change", {
						result: value&&value.length>0 ? value[this.nodeKey] : data[0][this.nodeKey],
						value: dVal&&dVal.length>0 || data[0][this.nodeKey],
						cur: value ? value : data[0]
					})	
					
				} else {
					this.$emit("change", {
						result: dVal&&dVal.length>0  ? dVal: data[0][this.nodeKey],
						value: value&&value.length>0  ? value[this.nodeValue] : data[0][this.nodeValue],
						cur: value ? value : data[0]
					})
				}
				}

			},
			handlerChange(e) {

				if (this.children && this.children.length > 0) {
					var arr = [...e.detail.value];
					var pickVal = arr[0] || 0;
					var data = this.range;
					this.children = this.options[pickVal].children
					var aaa = this.children
					var cur = [data[pickVal], aaa[arr[1] || 0]];
					var label = "";
					var value = "";

					// this.$nextTick(()=>{
					// 	this.pickVal=pickVal;
					// });
					this.$emit("change", {
						result: cur[1].key,
						value: `${cur[0].title}/ ${cur[1].title}`,
						obj: cur
					})
				} else {
					var arr = e.detail.value;
					var pickVal = arr[0] || 0;
					var data = this.range;
					var cur = data[pickVal];
					var label = "";
					var value = "";
					this.$emit("change", {
						result: cur.key,
						value:`${cur.title}`,
						cur: cur
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";
</style>
